// components/tabs/tabs.js
Component({
    /**
     * 组件的属性列表
     */
    // vue 中的props其实就是单词properties的缩写 他是用来接受父组件传递过来的数据的
    properties: {
        tabs: {
            type: Array, // 定义传递过来的数据的数据类型
            value: ['选项', '选项', '选项'] // 定义默认值
        },
        str: String
    },

    /**
     * 组件的初始数据
     */
    data: {
        msg: 'hello minicomponent',
        tel: 110,
        user: {
            name: 'zhangsan',
            tel: 110,
            age: 18
        },
        arr: ['英雄联盟', '王者荣耀']
    },

    /**
     * 组件的方法列表
     */
    methods: {
        choseTab(e) {
            console.log(e)
        },

        changeStr() {
            // this.setData({
            //     str: '诺克萨斯'
            // })
            // this.data.msg = '你好小程序'
            // console.log(this.data.msg)
            this.setData({
                msg: '你好小程序',
                tel: 120,
                'user.name': '李四',
                'user.age': 28,
                'arr[0]': '绝地求生'
            })
            // console.log(this.data.user)
            console.log(this.data.arr)
        }
    },
    // 在vue中监听数据变化的方法是watch 但是在小程序中有所不同
    // 小程序中想要监听到数据的变化就必须使用setData
    // 小程序的数据监听只能获取到变化后的新值
    // 小程序中没有深度监听 他需要使用通配符 "**"
    observers: {
        // msg(newVal) {
        //     console.log(newVal)
        // }
        // 'msg,tel'(new1, new2) {
        //     console.log(new1, new2)
        // }
        // 'user.name, user.age'(newVal, newVal2) {
        //     console.log(newVal, newVal2)
        // }
        // 'user.**'(newVal) {
        //     console.log(newVal)
        // }
        'arr.**'(newVal) {
            console.log(newVal)
        }
    }
})
